<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<mescroll-uni :ref="'mescrollRef'+i" top="180" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<uni-swiper-dot :info="swiperImage" :current="current" field="content" mode="default"
				:dotsStyles="dotsStyles">
				<swiper :autoplay="true" :circular="true" :interval="3000" :duration="500" @change="swiperChange"
					:style="{ height: swiperHeight + 'px' }">
					<block v-for="(item,swiIndex) in swiperImage" :key="swiIndex">
						<swiper-item>
							<u-image width="750rpx" :height="`${swiperHeight}px`" :src="item" mode="aspectFill"
								:fade="false"></u-image>
						</swiper-item>
					</block>
				</swiper>
			</uni-swiper-dot>
			<!-- 数据列表 -->
			<view class="page_content">
				<view class="index-product-wrapper">
					<view class='goods-list'>
						<view class="goods-box item" v-for="(item,index) in sortProduct" :key="index"
							@click="godDetail(item.id)">
							<view class="brands" style="align-items: center;">
								<u-image width="78rpx" height="78rpx" :src="item.brandImage" mode="aspectFill"
									shape="circle"></u-image>
								<view class="brand-detail">
									<text class="brand-name">{{item.brandName}}</text>
								</view>
								<view class="brand-button" @click.stop="goBrand(item)">
									{{$t('cloudW.seeMore')}}<!--查看更多-->
									<u-icon name="arrow-right" size="22"></u-icon>
								</view>
							</view>
							<view class="goods-detail">
								<text class="goodsname">{{item.storeName}}</text>
								<view class="price">
									<text class="rmb">
										￥{{item.price}}
									</text>
									<text class="eur" v-if="item.otPrice&&item.otPrice!='0.00'">€{{item.otPrice}}</text>
									<text class="discount" v-if="item.discount">{{item.discount}}</text>
								</view>
								<view class="goodsimg" @tap.stop>
									<u-image @click="yulanImg(item.sliderImage,yulanIndex)" width="154rpx"
										height="154rpx" v-for="(img,yulanIndex) in JSON.parse(item.sliderImage)"
										:key="yulanIndex" v-if="yulanIndex<6" :src="`${img}`" class="image"
										mode="aspectFit">
									</u-image>
									<view class="num_box pos_absolute1 flex2"
										v-if="JSON.parse(item.sliderImage).length > 6"
										@click="yulanImg(item.sliderImage,6)">
										<image src="../../static/images/pic_icon.png" mode="aspectFill"></image>
										<text class="span">+{{JSON.parse(item.sliderImage).length - 6}}</text>
									</view>
								</view>

							</view>
							<view class="brand-bottom">
								<view class="shipaddWarp">
									<!-- <image src="../../static/images/riben.png" class="shipadd"></image>
									<text class="shipaddName">日本</text> -->
									<block v-for="(option,optionIndex) in iconList" :key="optionIndex" v-if="item.tempId == option.id">
										<image :src="`../../static/images/${option.site}.png`" class="shipadd"></image>
										<text class="shipaddName">{{$t(`publicLang.${option.name}`)}}</text>
									</block>
								</view>
								<view class="btn">
									<button class="addcart" @click.stop="onchangeIsShow(item)">
										<text class="iconfont icongouwuche"></text>
										<text v-if="!item.merIsShow">{{$t('cloudW.onTheShelf')}}</text>
										<text v-else>{{$t('cloudW.takeDown')}}</text>
									</button>
									<!-- #ifdef MP -->
									<downLoadImg :goods="item" :configApi.sync="configApi">
										<text slot="cont" class="downLoadImg">
											<text class="iconfont iconxiazai9"></text>
											<text class="txt">{{$t('cloudW.download')}}</text>
										</text>
									</downLoadImg>
									<!-- #endif -->
									<button class="addcart" @click.stop="onchangeIsBest(item)">
										<text class="iconfont iconadd-product"></text>
										<text v-if="!item.isBest">{{$t('cloudW.recommend')}}</text>
										<text v-else>{{$t('cloudW.cancelRecommendation')}}</text>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {
		zoneGoodsList,
	} from '@/api/store.js';
	import {
		productIsshow,
		merchantStoreProductIsBest
	} from '@/api/storeGoods.js';
	let app = getApp();
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: {
				// 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0;
				},
			},
			tabs: {
				// 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return [];
				},
			},
		},
		computed: mapGetters(['iconList']),
		data() {
			return {
				current: 0, // 指示点
				dotsStyles: {
					backgroundColor: "rgba(255,255,255,.4)",
					selectedBackgroundColor: "rgba(255,255,255,1)",
				},
				swiperHeight: 150,
				configApi: {}, //分享类容配置
				downOption: {
					textInOffset: this.$t('publicLang.pullDownToRefresh'), // 下拉的距离在offset范围内的提示文本
					textOutOffset: this.$t('publicLang.releaseUpdate'), // 下拉的距离大于offset范围的提示文本
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					textSuccess: this.$t('publicLang.loadedSuccessfully'), // 加载成功的文本
					textErr: this.$t('publicLang.failedToLoad'), // 加载失败的文本
					auto: false
				},
				upOption: {
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					auto: false, // 不自动加载
					empty: {
						tip: this.$t('publicLang.empty') // 提示
						// btnText: "去看看",
					},
				},
				listQuery: {
					page: 1,
					limit: 10
				},
				sortProduct: [], //商品数据

				swiperImage: []
			};
		},
		watch: {
			index: {
				immediate: true,
				handler: function(newValue, oldValue) {
					if (this.i == newValue) {
						this.swiperImage = []
						let imgArr = JSON.parse(this.tabs[newValue].image)
						this.swiperImage = imgArr
						let that = this;
						const loop_map = async () => {
						  // map中返回的是一个promise数组，需要通过Promise.all处理
						  const promise = imgArr.map(async res => {
						    const num = await that.getHeight(res)
						    return num;
						  })
						  const result = await Promise.all(promise)
						  that.swiperHeight = Math.max(...result.map(x => x))
						}
						loop_map()
					}
				}
			}
		},
		mounted() {
		},
		methods: {
			// 轮播图变化
			swiperChange(e) {
				this.current = e.detail.current
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.i: 每个tab页的专属下标
				// this.index: 当前tab的下标
				var _this = this;
				this.$nextTick(function() {
					this.listQuery.page = page.num;
					this.listQuery.zoneId = this.tabs[this.i].id
					zoneGoodsList(this.listQuery).then((res) => {
						var data = res.data.list;
						if (page.num == 1) _this.sortProduct = [];
						_this.sortProduct = _this.sortProduct.concat(data);
						_this.mescroll.endBySize(data.length, res.data.total);
					});
				});
			},
			async getHeight(data) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: data,
						success: function(image) {
							uni.getSystemInfo({
								success: function(res) {
									let bili = image.width / res.screenWidth;
									let hight = image.height / bili;
									resolve(hight)
								}
							});

						}
					});
				})
			},
			//预览图片
			yulanImg(data, index) {
				var that = this;
				uni.previewImage({
					current: index,
					urls: JSON.parse(data),
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏']
					}
				});
			},
			godDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_detail/index?id=${id}`
				})
			},
			//跳转品牌商品列表页
			goBrand(item) {
				console.info(item)
				uni.navigateTo({
					url: `/pages/store_goods/brandList?id=${item.brandId}`,
					success: function(res) {
						res.eventChannel.emit('shangjiaData', {
							data: JSON.stringify(item)
						})
					}
				})
			},
			onchangeIsShow(row) {
				row.merIsShow = !row.merIsShow
				productIsshow({
					productId: row.id,
					isNotShow: row.merIsShow ? "0" : "1",
				}).then((res) => {
					uni.showToast({
						title: '操作成功！'
					})
				});
			},
			onchangeIsBest(row) {
				merchantStoreProductIsBest({
					productId: row.id,
					isBest: !row.isBest,
				}).then((res) => {
					uni.showToast({
						title: '打标成功！'
					})
					row.isBest = !row.isBest
				});
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: "点击了按钮,具体逻辑自行实现",
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page_content {
		font-size: 28rpx;

		.swiper {
			position: relative;
			width: 100%;
			height: 350rpx;
			margin: 0 auto;
			overflow: hidden;
			/* #ifdef MP */
			z-index: 3;

			/* #endif */
			swiper,
			.swiper-item,
			image {
				width: 100%;
				height: 350rpx;
				border-radius: 5rpx;
			}
		}

		.goods-list {
			width: 100%;
			display: flex;
			flex-direction: column;

			.goods-box {
				width: 100%;
				padding: 30rpx;
				border-bottom: 2rpx solid #eee;
				display: flex;
				flex-wrap: wrap;
				background: linear-gradient(180deg, #fff 0%, #fff 100%);

				.brands {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.imageWarp {
						width: 78rpx;
						height: 78rpx;
						margin-right: 20rpx;
						border-radius: 39rpx;
						overflow: hidden;
						background: #f6f6f6;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.brand-detail {
						display: flex;
						width: 450rpx;
						flex-direction: column;

						.brand-name {
							font-size: 28rpx;
							font-weight: 500;
						}

						.brand-goodsNum {
							color: #666;
							font-size: 24rpx;
						}
					}

					.brand-button {
						// border: 1rpx solid #DFDFDF;
						font-size: 22rpx;
						color: #111111;
						padding: 8rpx 16rpx;
					}

				}

				.goods-detail {
					display: flex;
					width: 100%;
					padding: 0 100rpx 0 100rpx;
					flex-direction: column;

					.goodsname {
						font-size: 24rpx;
						margin-top: 16rpx;
					}

					.price {
						.rmb {
							font-size: 40rpx;
							font-weight: 700;
							font-family: Tahoma-Bold, Tahoma;
						}

						.hkd {
							margin: 0 16rpx;
							color: #666;
							font-weight: 400;
						}

						.eur {
							margin: 0 16rpx;
							color: #666;
							font-weight: 400;
						}

						.discount {
							background-color: #E9D5AC;
							padding: 2rpx 8rpx;
							color: #4C360B;
							border-radius: 4rpx;
						}
					}

					.goodsimg {
						width: 486rpx;
						padding: 10rpx 0;
						position: relative;
						position: relative;
						display: flex;
						flex-wrap: wrap;

						.image {
							/* margin: 0 8rpx 0 0; */
							margin-bottom: 10rpx;
							background-color: #fff;
							margin-right: 10rpx;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}

						image {
							width: 154rpx;
							height: 154rpx;
							margin: 0 8rpx 0 0;
							background-color: #f6f6f6;

							&:nth-child(3n) {
								margin-right: 0;
							}
						}

						.num_box {
							width: 88rpx;
							height: 34rpx;
							background: rgba(0, 0, 0, 0.6);
							border-radius: 4rpx 0px 0px 0px;
							position: absolute;
							bottom: 20rpx;
							right: 0rpx;
							display: flex;
							align-items: center;

							image {
								margin-left: 20rpx;
								width: 24rpx !important;
								height: 20rpx !important;
								margin: 0 9rpx 0 14rpx !important;
								background-color: transparent !important;
							}

							.span {
								font-size: 24rpx;
								color: rgba(255, 255, 255, 1);
								font-weight: 400;
							}
						}

					}
				}

				.brand-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding-left: 100rpx;
					padding-right: 40rpx;
					.shipaddWarp{
						display: flex;
					}
					.btn {
						// margin-left: 240rpx;
						flex-direction: row;
						display: flex;
						justify-content: flex-end;
						flex: 1;

						button.addcart {
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							font-size: 20rpx;
							margin-left: 20rpx;

							.iconfont {
								font-size: 24rpx;
								margin-right: 8rpx;
							}
						}

					}

					.shipadd {
						width: 22rpx;
						height: 22rpx;
						vertical-align: middle;
						flex-shrink: 0;
					}

					.shipaddName {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						line-height: 28rpx;
						margin-left: 6rpx;
						vertical-align: middle;
					}
				}

			}
		}

		.downLoadImg {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 20rpx;
			margin-left: 22rpx;

			.iconfont {
				font-size: 24rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>
